<script setup lang="ts">
import { getSwipers, getNavs } from '@/apis/home';
import type { Swiper, Nav } from '@/types/home';

const swipers = ref<Swiper[]>([]);
const navs = ref<Nav[]>([]);

async function fetchSwipers() {
  try {
    const data: any = await getSwipers();
    swipers.value = data.data.data;
  } catch (err) {
    uni.showToast({
      title: '获取数据失败',
      icon: "error",
      duration: 2000
    });
  }
}

// get data
fetchSwipers()
navs.value = getNavs();
</script>

<template>
  <div class="container">
    <swiper class="swiper" circular indicator-dots autoplay interval="3000" duration="1000">
      <swiper-item class="overflow-hidden" v-for="swiper in swipers" :key="swiper.id">
        <image :src="swiper.img" class="w-full h-150px" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <div class="mt-2 bg-light-50">
      <uni-grid :column="5" :showBorder="false">
        <uni-grid-item v-for="(nav, index) in navs" :index="index" :key="index">
          <view class="flex flex-col items-center justify-center pt-3">
            <image :src="nav.icon" class="w-32px h-32px" mode="aspectFit"></image>
            <text class="text-sm mt-2">{{ nav.text }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </div>



  </div>
</template>

<style lang="scss">
.container {
  background-color: #f1f2f3;
}
</style>